<div class="monospace border" *ngIf="selectedRoute">
  <div class="modal_header border-bottom py3 px4">
    <div class="monospace left-align">
      {{selectedRoute.name}}
    </div>
  </div>
  <div class="modal_content py3 px4">
    <ul class="list-reset m0" *ngIf="selectedRoute">
      <li>
        <span class="info-key">
          path:
        </span>
        <span class="info-value">
          {{selectedRoute.path}}
        </span>
      </li>
      <!-- Note: (ericjim) specificity is not a concept in the alpha component router. -->
      <li *ngIf="selectedRoute.specificity">
        <span class="info-key">
          specificity:
        </span>
        <span class="info-value">
          {{selectedRoute.specificity}}
        </span>
      </li>
      <li>
        <span class="info-key">
          handler:
        </span>
        <span class="info-value">
          {{selectedRoute.handler}}
        </span>
      </li>
      <li *ngIf="hasSelection">
        <span class="info-key">
          data:
        </span>
        <ul class="list-reset">
          <li *ngFor="let el of selectedRoute._data">
            <div class="pl4">
              <span class="info-key">
                {{el.key}}:
              </span>
              <span class="info-value">
                {{el.value}}
              </span>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>
